addLoadEvent(function() {
    MenuBar.enableHover();    
})  

var shownDropDown = 0;
var timeout = 200;
var closetimer = 0;

var MenuBar = {
    enableHover:function() {
        
        /*
         * Load contents of dropdown into menu
         */
        $('#userMenuDropdown').load('ihtml/userdropdown.ihtml');        

        /*
         * Register onclick for menu buttons
         */
        $('ul.dropdown #editProfile').live('click', function() {
            document.getElementById('hiddenForm:hiddenEditProfile').click();
        });
        $('ul.dropdown #logOut').live('click', function() {
            document.getElementById('hiddenForm:hiddenLogOut').click();
        });

        /*
         * Register hover for menu button
         */
        $("#userMenu").hover(function() {
            placeDropDown("#userMenu", "#userMenuDropdown");
            showDropDown("#userMenuDropdown");
        }, function() {
            startCloseTimer();
        });
    }
}

var showDropDown = function(dropdown) {
    cancelCloseTimer();
    closeDropDown();
    shownDropDown = $(dropdown);
    shownDropDown.css("visibility", "visible");
    shownDropDown.mouseenter(cancelCloseTimer);
    shownDropDown.mouseleave(startCloseTimer);
}

var placeDropDown = function(button,dropdown) {
    var pos = $(button).offset();  
    var height = $(button).height();
    var width = document.getElementById('userMenu').offsetWidth;
    $(dropdown).css( 
        {"left": (pos.left+1 ) + "px", 
        "top" : (pos.top + height + 2) + "px",
        "width" : width -1} );
};

// closes drop down
function closeDropDown()
{
	if(shownDropDown) shownDropDown.css("visibility", "hidden");
}

// go close timer
function startCloseTimer()
{
	closetimer = window.setTimeout(closeDropDown, timeout);
}

// cancel close timer
function cancelCloseTimer()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}